<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="..\..\node_modules\vue\dist\vue.js"></script>
    <script src="..\..\node_modules\vue-router\dist\vue-router.js"></script>
</head>
<body>
<div id="app">
    {{message}}
    <p></p>
    <router-link to="/foo/java">Go to java</router-link>
    <p></p>
    <router-link to="/foo/vue">Go to Vue</router-link>
    <p></p>
    <router-link to="/sth1">sth1</router-link>
    <p></p>
    <router-view></router-view>
</div>
</body>
<script type="application/javascript">
    const Foo = {
        template: '<div>Foo</div>' ,
        beforeRouteEnter(to, from, next) {
            console.log("beforeRouteEnter call : " + to.path);
            console.log(to);
            console.log(from);
            next();
        },
        beforeRouteUpdate(to, from, next) {
            console.log("beforeRouteUpdate call : " + to.path);
            console.log(to);
            console.log(from);
            next();
        },
        beforeRouteLeave(to, from, next) {
            console.log("beforeRouteLeave call : " + from.path);
            console.log(to);
            console.log(from);
            next();
        }
    };
    const S = {
        template: '<div>S</div>' ,
        beforeRouteEnter(to, from, next) {
            console.log("beforeRouteEnter call : " + to.path);
            console.log(to);
            console.log(from);
            next();
        },
        beforeRouteUpdate(to, from, next) {
            console.log("beforeRouteUpdate call : " + to.path);
            console.log(to);
            console.log(from);
            next();
        },
        beforeRouteLeave(to, from, next) {
            console.log("beforeRouteLeave call : " + from.path);
            console.log(to);
            console.log(from);
            next();
        }
    };

    const routes = [
        { path: '/foo/:message', component: Foo},
        { path: '/sth1', component: S ,meta: { requiresAuth: true },
            beforeEnter:function(to , from , next){
                console.log("run beforeEnter : " + to.path);
                next();
            }
        }
    ];

    const router = new VueRouter({
        routes // (缩写) 相当于 routes: routes
    });

    //如果next重定向，则执行多次。
    //最后一次导航的状态就是 confirmed。
    router.beforeEach(function(to , from , next){
        console.log("router.beforeEach called : " + to.path);

        // next(false);

        if(false && to.path.startsWith('/foo/')){
            next('/sth1');
        }
        else{
            next();
        }
    });

    //执行完组件的所有guide后执行。
    router.beforeResolve(function(to , from , next){
        console.log("router.beforeResolve called");
        next();
    });

    router.afterEach(function(to , from){
        console.log("router.afterEach called");
    });

    const app = new Vue({
        router,
        data:{
            "message":"hello vue router"
        }
    }).$mount('#app');

</script>
</html>